import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout/index.vue'
import store from '@/store'
import { getToken } from '@/utils/auth' // 从cookie中拿到token

Vue.use(VueRouter)

// 路由规则
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: '/dashboard', // 默认子路由
        name: 'Dashboard',
        component: () => import('@/views/home/index.vue'),
        meta: { code: 'HOME', title: 'dashboard' }
      }
    ]
  },
  {
    path: '/auth',
    redirect: '/auth/role',
    component: Layout,
    name: 'Auth',
    meta: { title: 'auth', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'role',
        name: 'role',
        component: () => import('@/views/role/index.vue'),
        meta: { code: 'role', title: 'role' }
      },
      {
        path: 'menu',
        name: 'menu',
        component: () => import('@/views/menu/index.vue'),
        meta: { code: 'menu', title: 'menu' }
      },
      {
        path: 'resource',
        name: 'resource',
        component: () => import('@/views/resource/index.vue'),
        meta: { code: 'menu', title: 'resource' }
      }
    ]
  },
  {
    path: '/demo',
    component: Layout,
    redirect: '/demo/index',
    meta: { title: 'demo', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/demo/index.vue'),
        meta: { title: 'demo', icon: 'form' }
      }
    ]
  },
  {
    path: '/user',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/user/index.vue'),
        meta: { code: 'menu', title: 'user' }
      }
    ]
  },
  {
    path: '/list',
    component: Layout,
    children: [
      {
        path: 'demo2',
        name: 'Demo2',
        component: () => import('@/views/demo2/index.vue'),
        meta: { code: 'DEMO2', title: 'demo2' }
      },
      {
        path: 'demo3',
        name: 'Demo3',
        component: () => import('@/views/demo3/index.vue'),
        meta: { code: 'DEMO3', title: 'demo3' }
      }
    ]
  },
  {
    path: '*',
    name: '404',
    component: () => import('@/views/error-page/404.vue')
  }
]
const router = new VueRouter({
  mode: 'history',
  base: '/',
  routes
})

// 全局前置守卫：任何页面的访问都要经过这里
// to：要去哪里的路由信息
// from：从哪里来的路由信息
// next：通行的标志
router.beforeEach((to, from, next) => {
  // to.matched 是一个数组（匹配到是路由记录）
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const hasToken = getToken()
    console.log(hasToken, '111', store.getters.userId, store.getters)
    if (!hasToken) {
      // 跳转到登录页面
      next({
        name: 'login',
        query: { // 通过 url 传递查询字符串参数
          redirect: to.fullPath // 把登录成功需要返回的页面告诉登录页面
        }
      })
    } else {
      next() // 允许通过
    }
  } else {
    next() // 允许通过
  }

  // // 路由守卫中一定要调用 next，否则页码无法展示
  // next()
  // if (to.path !== '/login') {
  //   // 校验登录状态
  // }
})

export default router
